<template>
  <div style="border: 1px solid; padding: 10px;">
    <h4>css v-bind</h4>
    <div class="txt">Vue3中在style样式通过v-bind()绑定变量的原理其实就是给元素绑定CSS变量，在绑定的数据更新时调用CSSStyleDeclaration.setProperty更新CSS变量值。</div>
    <button @click="themeChange('blue')">变蓝</button>
    <button @click="themeChange('red')">变红</button>
    <hr>
    <button @click="setCssVar('--theme-color', 'yellow')">变黄</button>
    <button @click="setCssVar('--theme-color', 'pink')">变粉</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const theme = reactive({
  color: 'red'
})

const themeChange = (color) => {
  theme.color = color
}
 const setCssVar = (prop, val, dom = document.documentElement) => {
  dom.style.setProperty(prop, val)
}

</script>

<style scoped>
.txt {
  color: v-bind('theme.color');
  background: var(--theme-color);
}


</style>
